<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Outline 1 </title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border-radius: 4px;
            /*background-color: deeppink;*/
            outline: 3px dashed white;
            outline-offset: -20px;


            padding: 1em;
            border: 16px solid transparent;
            border-image: 16 repeating-linear-gradient(-45deg,
            red 0, red 1em,
            transparent 0, transparent 2em,
            #58a 0, #58a 3em,
            transparent 0, transparent 4em);

        /*@keyframes ants { to { background-position: 100% } }*/
        /*.marching-ants { padding: 1em;*/
        /*    border: 1px solid transparent; background:*/
        /*        linear-gradient(white, white) padding-box,*/
        /*        repeating-linear-gradient(-45deg,*/
        /*        black 0, black 25%, white 0, white 50%*/
        /*        ) 0 / .6em .6em;*/
        /*    animation: ants 12s linear infinite; }*/
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>
